<template>
  <div>
  <div id="top">
    <div id="topBar">
      <router-link :to="{name:'principle'}"><van-icon name="arrow-left" style="float: left;margin-top: 0.5rem;margin-left: 0.5rem"/>
        <p style="float: left">排行榜</p></router-link>
      <router-link :to="{name:'pointsRecord'}"><p style="float: right;color: #39a9ed;margin-right: 0.5rem" >排名说明</p></router-link>
    </div>
  </div>
  <div id="mid">
    <div id="self">
     <p style="width: 100%;text-align: left;font-size: 0.9rem;color: #39a9ed">本周排名</p>
    <div style="margin-top: -0.5rem;">第
      <p style="display:inline-block;color: #39a9ed;font-size: 2.5rem;height: 100%;line-height: 2.5rem">{{num}}</p>
      名
    </div>
    </div>
    <ul id="rank">
      <li><img src="../assets/first.png" height="200" width="200"/>
      <p class="name">用户12345</p>
        <p class="points">7803</p>
      </li>
      <li><img src="../assets/second.png" height="200" width="200"/>
        <p class="name">用户12345</p>
        <p class="points">7803</p>
      </li>
      <li><img src="../assets/third.png" height="200" width="200"/>
        <p class="name">用户12345</p>
        <p class="points">7803</p>
      </li>
        <router-link :to="{path:'/rankingList/more'}"><p id="more">查看更多</p></router-link>
    </ul>
  </div>
    <div id="foot">
     <div id="left">

     </div>
      <div id="right">
        <p>您本周排名在五百名之前，</p>
        <div style="width: 100%;overflow: hidden">
        <p style="display: inline-block;float: left">共有</p>
        <p style="display: inline-block;font-size: 1rem;color: red;font-weight: bold;float: left">1</p>
        <p style="display: inline-block;float: left;">次抽奖机会</p>
        </div>
        <p style="margin-top: 1.5rem">点击左侧图标抽奖吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "rankingList",
      data(){
          return{
            num:500,
          }
      }
    }
</script>

<style scoped>
  #top{
    width: 100%;
    height:4.5rem;
    background: red;
    overflow: hidden;
    position: relative;
  }
  #topBar{
    height: 2rem;
    width: 100%;
    line-height: 2rem;
    background: papayawhip;
    color:black;
    font-size: 1rem;
    margin-top: 1rem;
  }
  #topBar p{
    display: inline-block;
  }
 #mid{
  margin: 0 0.5rem;
  box-sizing: border-box;
}
  #self{
    width: 100%;
    height: 4.2rem;
    border: #39a9ed solid 0.1rem;
    border-bottom: none;
    padding: 0.3rem 0.5rem;
    box-sizing: border-box;
  }
  #rank{
    width: 100%;
    border: #39a9ed solid 0.1rem;
    box-sizing: border-box;
    height: 15rem;
    background: pink;
  }

  #rank>li{
    height: 4rem;
    width: 100%;
    background: #42b983;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }
  #rank>li>img{
    width: 3rem;
    height: 100%;
    background: #39a9ed;
    display: inline-block;
    float: left;
  }
  #rank>li p{
    display: inline-block;
    line-height: 3rem;
  }

  .name{
  font-size: 1.2rem;
    float: left;
    margin-left: 1rem;
  }
  .points{
    font-size: 0.9rem;
    float: right;
  }
#more{
   font-size: 0.9rem;
   margin-top: 0.8rem;
  color: #39a9ed;
}

  #foot{
    height: 11rem;
    margin: 0 0.5rem;
    margin-top: 0.8rem;
    border: #39a9ed solid 0.1rem;
    box-sizing: border-box;
  }

  #left{
    width: 45%;
    height: 100%;
    background: #42b983;
    display: inline-block;
    float: left;
  }
  #right{
    width: 55%;
    height: 100%;
    display: inline-block;
    float: left;
    padding-top: 2rem;
    box-sizing: border-box;
  }
  #right p{
    text-align: left;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
</style>
